<template>
  <div class="index">
    <!-- 广告部分 -->
    <div class="ad" v-show="adclose">
      <span class="close" @click="close"></span>
      <img width="100%" src="/img/index/20200623230029_9756.png" alt="" />
      <span class="imm-attention"></span>
    </div>
    <div class="container">
      <!-- 搜索框 -->
      <div class="search">
        <!-- 显示地理位置 -->
        <router-link to="#" class="search-p"
          ><span class="geographical"></span
          ><span class="c-0">太原</span></router-link
        >
        <span class="line">|</span>
        <router-link to="/search" class="search-p"
          ><span class="searchicon"></span
          ><span>搜索手机型号</span></router-link
        >
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="navbar">
      <mt-navbar class="page-part" v-model="selectednavitem">
        <mt-tab-item id="1"
          ><router-link class="c-0" to="recommend"
            >推荐</router-link
          ></mt-tab-item
        >
        <mt-tab-item :id="type.id" v-for="(type, i) of first_type" :key="i"
          ><router-link class="c-0" :to="path[i]"
            >卖{{ type.name }}</router-link
          ></mt-tab-item
        >
      </mt-navbar>
    </div>
    <router-view></router-view>
    <!-- 页面顶部 end -->
  </div>
</template>
<style  lang="scss">
.index {
  // 页面顶部广告
  .ad {
    position: relative;
    width: 100%;
    height: 60px;
  }
  .close,
  .imm-attention {
    position: absolute;
  }
  .close {
    width: 16px;
    height: 16px;
    background: url("/img/index/20200623230029_9769.png");
    top: 50%;
    left: 10px;
    margin-top: -8px;
    background-size: cover;
  }
  .imm-attention {
    width: 86px;
    height: 31px;
    border-radius: 16px;
    text-align: center;
    background: #fff url("/img/index/20200623230029_8765.png");
    background-size: cover;
    top: 50%;
    margin-top: -15px;
    right: 15px;
  }
  .container {
    padding: 0 10px;
  }
  // 地理定位 && 搜索
  .search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 0 15px;
    margin: 5px auto 0;
    background: #f4f4f4;
    border-radius: 8px;
    align-items: center;
  }
  .search-p {
    display: flex;
    align-items: center;
  }
  .line {
    margin: 0 15px;
    color: #999;
  }
  .c-0 {
    color: #000;
  }
  .search > a {
    color: #999;
  }
  .geographical {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: url("/img/index/20200316195303_8006.png");
    background-size: 340px 70px;
    background-position: 0 0;
  }
  .searchicon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: url("/img/index/20200316195303_8006.png");
    background-size: 365px 70px;
    background-position: -88px 0;
  }
  // 顶部导航
  .mint-navbar {
    justify-content: space-between;
  }

  // 页面底部导航栏
  .icon-bg {
    display: flex;
    width: 28px;
    height: 28px;
    background: url("/img/index/20200413104656_7617.png") no-repeat;
    background-size: 25rem;
  }
  .countdown-price {
    padding: 5px 20px 5px 0;
    margin-right: 15px;
    border-right: 1px dashed #000;
  }
  .countdown .countdown-img {
    width: 50px;
    height: 50px;
    margin-left: 30px;
    background: url("/img/index/20200714194403_6296.png");
    background-size: contain;
  }
  .icbg1 {
    background-position: 0px 0;
  }
  .icbg2 {
    background-position: -122px 0;
  }
  .icbg3 {
    background-position: -254px 0;
  }
  .icbg4 {
    background-position: -376px 0;
  }
  .active-ic1 {
    background-position: 0px -40px;
  }
  .active-ic2 {
    background-position: -122px -40px;
  }
  .active-ic3 {
    background-position: -254px -40px;
  }
  .active-ic4 {
    background-position: -376px -40px;
  }
}
</style>
<script>
export default {
  data() {
    return {
      selected: "index",
      // 控制广告的隐藏
      adclose: true,
      // 被选中的导航栏,默认选中1
      selectednavitem: "1",
      // 一级类目
      first_type: [],
      path: ["phone", "flat", "laptop", "desktop"],
    };
  },
  methods: {
    // 关闭广告
    close() {
      this.adclose = false;
    },
  },
  mounted() {
    // 发送ajax获取一级类目
    this.axios.get("/products/firstcategory").then((res) => {
      this.first_type = res.data.results;
    });
  },
};
</script>